<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body,
        ul,
        li,
        input {
            margin: 0;
            padding: 0;
        }

        body {
            font: 12px/1.2 Tohoma;
        }

        li {
            list-style-type: none;
        }

        /* 外层样式 */
        #list {
            width: 120px;
            margin: 10px auto;
            border: 1px solid black;
            border-radius: 5px;
            padding: 0 5px;
            cursor: default;
        }

        #list li {
            padding: 8px;
            line-height: 12px;
            vertical-align: middle;
            word-spacing: 5px;
        }

        p {
            text-align: center;
        }

        /* 全选样式*/
        #pick {
            border-bottom: 1px solid black;
        }

        /* 反选样式 */
        #pick span {
            color: aqua;
        }

        #pick span:hover {
            color: red;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var oInput = document.getElementsByTagName("input");
            var oRevPick = document.getElementById("pick").getElementsByTagName("span")[0];

            /* 为了确认没有个input的chekout状态*/
            for (var i = 1; i < oInput.length; i++) {
                oInput[i].index = i;
                /* 全选功能 */
                oInput[0].onmouseup = function () {
                    var oChange = document.getElementById("pick").getElementsByTagName("strong")[0];
                    if (this.checked == true) {
                        oChange.innerHTML = " 全选";
                        for (i = 1; i < oInput.length; i++) {
                            oInput[i].checked = false;
                        }
                    }
                    else {
                        oChange.innerHTML = " 全不选";
                        for (i = 1; i < oInput.length; i++) {
                            oInput[i].checked = true;
                        }
                    }
                }

                /* 独立选择 */
                oInput[i].onmouseup = function () {
                    var oChange = document.getElementById("pick").getElementsByTagName("strong")[0];
                    console.log(oInput[this.index].checked);
                    /* 每次独立选择完遍历一遍所有的input，判断是否每个都为true */
                    for (i = 1; i < oInput.length; i++) {
                        if (oInput[i].checked == false) {
                            oInput[0].checnked = true;
                            oChange.innerHTML = " 全不选";
                        }
                        else {
                            oInput[0].checnked = false;
                            oChange.innerHTML = " 全选";
                        }
                    }

                }

                /* 反选功能 */
                oRevPick.onmouseup = function () {

                }
            }
        }
    </script>
</head>

<body>
    <ul id="list">
        <li id="pick"><input type="checkbox"><strong> 全选</strong><span> 反选</span></li>
        <li><input type="checkbox"> 选项（一）</li>
        <li><input type="checkbox"> 选项（二）</li>
        <li><input type="checkbox"> 选项（三）</li>
        <li><input type="checkbox"> 选项（四）</li>
        <li><input type="checkbox"> 选项（五）</li>
        <li><input type="checkbox"> 选项（六）</li>
        <li><input type="checkbox"> 选项（七）</li>
        <li><input type="checkbox"> 选项（八）</li>
        <li><input type="checkbox"> 选项（九）</li>
        <li><input type="checkbox"> 选项（十）</li>
    </ul>
    <p>1、切换全选/全部选文字；2、根据选中个数更新全选框状态</p>
</body>

</html>